<template>
  <div style="padding:0px 8px">
    <el-card class="configContainer" shadow="always">
      <div style="display: flex;flex-direction: row;align-items: center">
        <h4 class="card-title"> 学校管理 </h4>
        <div class="space"/>
        <el-button type="primary" @click="showAdd">新增学校</el-button>
      </div>
      <el-divider/>
      <div style="margin: 8px">
        <div class="demo-form-inline">
          <el-input clearable v-model="searchForm.id" placeholder="学校id" style="width:200px;margin-right: 16px;"/>
          <el-input clearable v-model="searchForm.name" placeholder="学校名" style="width:200px;margin-right: 16px;"/>

          <el-button type="primary" @click="getSchool">
            <el-icon>
              <Search/>
            </el-icon>
            搜索
          </el-button>
          <el-button @click="reset()">重置</el-button>
        </div>
        <el-table height="400px" :header-cell-style="{background:'#f8f8f8',height:'40px',color:'#2b2b2b'}"
                  :data="schoolList"
                  style="width: 100%;margin-top: 16px;"
                  @selection-change="handleSelectionChange">
          <el-table-column fixed prop="id" label="id" width="120">
          </el-table-column>
          <el-table-column fixed prop="name" label="校名">
          </el-table-column>

          <el-table-column fixed prop="create_time" label="创建时间">
          </el-table-column>
          <el-table-column fixed prop="update_time" label="更新时间">
          </el-table-column>

          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="showEdit(scope.row)">
                <el-icon>
                  <Edit/>
                </el-icon>
                编辑
              </el-button>
              <el-button link type="" size="small" @click="showImport(scope.row.id)">
                <el-icon><EditPen /></el-icon>
                导入
              </el-button>
              <el-popconfirm title="确认删除吗?" @confirm="delSchool(scope.row.id)">
                <template #reference>
                  <el-button link type="danger" size="small">
                    <el-icon>
                      <Delete/>
                    </el-icon>
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-count="pagecount"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="currentChange"
          style="margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: center;"
          background layout="total, sizes, prev, pager, next, jumper"/>
    </el-card>
  </div>
  <el-dialog v-model="show" title="新增学校">
    <el-form ref="add" :model="userInfo" label-width="80px" :rules="rules">
    <el-form-item label="学校名" label-width="100px">
      <el-input v-model='schoolName'></el-input>
    </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="show = false">取消</el-button>
      <el-button type="primary" @click="addSchool()">确定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="show_edit" title="更新学校" >
    <el-form ref="edit" :model="userInfo" label-width="80px" :rules="rules">
    <el-form-item label="学校名" label-width="100px">
      <el-input v-model='editSchoolName'></el-input>
    </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="show_edit = false">取消</el-button>
      <el-button type="primary" @click="editSchool()">确定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="uploadDialogVisible" title="导入学生数据" center>
    <el-upload class="upload-demo" drag
               name="file"
               ref="upload"
               :before-upload="onBeforeUpload"
               :before-remove="beforeRemove"
               :on-change="onChange"
               :before-change="onChange"
               :http-request="uploadFile"
               action=""
               :file-list="fileList"
               limit="2"
               :auto-upload="true"
               accept=".xls,.xlsx"
               :data="file">
      <el-icon class="el-icon--upload">
        <upload-filled/>
      </el-icon>
      <div class="el-upload__text">
        将文件拖到此处 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          文件格式只能为xls、xlsx
          <el-link href="src/assets/template/导入模板.xls">下载导入模板</el-link>
          <span class="dialog-footer" style="float: right;">
                        <el-button :loading="upLoad" type="primary" @click="upFile">提交</el-button>
                      </span>
        </div>

      </template>
    </el-upload>
  </el-dialog>
  <CompanyText/>
</template>

<script>
import CompanyText from "../../../components/CompanyText.vue";

export default {

  name: "schoolManagerPage",
  props: {
    // msg: String
  },
  components: {
    CompanyText
  },
  data() {
    return {
      pagecount: null,
      total: 100,
      upLoad: false,
      schoolId: 1,
      uploadDialogVisible: false,
      editSchoolName: "",
      editSchoolId: 0,
      schoolName: "",
      searchForm: {
        id: "",
        name: "",
        current: 1,
        size: 10,
      },
      schoolList: [],
      show: false,
      show_edit: false
    }
  },
  created() {
    this.getSchool();
  },
  methods: {
    showImport(id) {
      this.schoolId = id;
      this.uploadDialogVisible = true;
    },
    onChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }

    },
    onBeforeUpload(file) {
      console.info(file.type)
      const isIMAGE = file.type === 'application/vnd.ms-excel'
      if (!isIMAGE) {
        this.$message.error('上传文件只能是.xls,.xlsx格式!')
      }
      return isIMAGE
    },
    uploadFile(param) {
      this.param = param;
      this.file = param.file;
    },
    upFile() {
      this.upLoad = true;
      let that = this;
      let data = new FormData();
      data.append("file", this.file)
      data.append("schoolId", this.schoolId)
      this.$http.post('/student/adminImportStuList', data, {
            onUploadProgress: (progressEvent) => {
              let num = progressEvent.loaded / progressEvent.total * 100 | 0;
              this.param.onProgress({percent: num})     //进度条
            }
          }
      ).then(function (response) {
        console.log('success' + response);
        if (response.code === 0) {
          console.log('success');
          that.$message.success(response.userMsg)
          that.uploadDialogVisible = false;
        }
        that.upLoad = false;
        this.file = null;
      }).catch(function (error) {
        console.log('上传失败')
      });
    },
    showEdit(item) {
      this.show_edit = true;
      this.editSchoolId = item.id;
      this.editSchoolName = item.name;
    },
    showAdd() {
      this.show = true;
    },
    reset() {
      this.searchForm = {};
      this.getSchool();
    },
    getSchool() {
      let that = this;
      this.$http.post('/school/getSchoolListPage', that.searchForm).then(function (response) {
        console.log('success' + response);
        that.schoolList = response.data.records;
        that.pagecount = response.data.pages;
        that.total = response.data.total;
        that.current = response.data.current;
      }).catch(function (error) {
        console.log('error');
      });
    },
    addSchool() {
      let that = this;
      this.$http.post('/school/addSchool', {
        "name": that.schoolName,
      }).then(function (response) {
        console.log('success' + response.data);
        if (response.code === 0) {
          console.log('success');
          that.$message.success(response.userMsg)
          that.show = false;
          that.getSchool()
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    delSchool(id) {
      let that = this;
      this.$http.post('/school/delSchool', {
        "id": id,
      }).then(function (response) {
        console.log('success' + response.data);
        if (response.code === 0) {
          console.log('success');
          that.$message.success(response.userMsg)
          that.show = false;
          that.getSchool()
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    editSchool() {
      let that = this;
      this.$http.post('/school/editSchool', {
        "name": that.editSchoolName,
        "id": that.editSchoolId,
      }).then(function (response) {
        console.log('success' + response.data);
        if (response.code === 0) {
          console.log('success');
          that.$message.success(response.userMsg)
          that.show_edit = false;
          that.getSchool()
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    currentChange(current) {
      this.searchForm.current = current;
      console.info(this.current)
      this.getSchool();
    },
    handleSizeChange(size) {
      this.searchForm.size = size;
      console.info(this.size)
      this.getSchool();
    },
  },
}
</script>

<style scoped>
.configContainer {
  margin: 10px 8px;
  padding: 0px;
  /* border: red 1px solid; */
}
</style>
